<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淘宝首页</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./iconfont.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app" class="content">
        <div class="title">
            <ul class="title--left">
                <li>
                    <a href="#">中国大陆</a>
                    <span class="iconfont iconjiantou-up-down-copy title-font"></span>
                    <ul class="title--select">
                        <li>中国大陆</li>
                        <li>美国</li>
                        <li>日本</li>
                        <li>韩国</li>
                        <li>澳大利亚</li>
                        <li>英国</li>
                    </ul>
                </li>
                <li><a href="#">亲，请登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#">手机逛淘宝</a></li>
                <p style="clear:both"></p>
            </ul>
            <ul class="title--right">
                <li>
                    <a href="#">我的淘宝</a>
                    <span class="icon iconfont iconjiantou-up-down-copy title-font"></span>
                </li>
                <li>
                    <span class="icon iconfont iconqicheqianlian title-font"></span>
                    <a href="#">购物车</a>
                    <span class="icon iconfont iconjiantou-up-down-copy title-font"></span>
                </li>
                <li>
                    <span class="icon iconfont iconxingzhuang60kaobei2 title-font"></span>
                    <a href="#">收藏夹</a>
                    <span class="icon iconfont iconjiantou-up-down-copy title-font"></span>
                </li>
                <li><a href="#">商品分类</a></li>
                <li>
                    <a href="#">千牛卖家中心</a>
                    <span class="icon iconfont iconjiantou-up-down-copy title-font"></span>
                </li>
                <li>
                    <a href="#">联系客服</a>
                    <span class="icon iconfont iconjiantou-up-down-copy title-font"></span>
                </li>
                <li>
                    <span class="icon iconfont iconwangzhandaohang title-font"></span>
                    <a href="#">网站导航</a>
                    <span class="icon iconfont iconjiantou-up-down-copy title-font"></span>
                </li>
                <p style="clear:both"></p>
            </ul>
        </div>
    </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            showArea: false
        },
        methods: {
            handleShowSelect(){
                this.showArea = true
            },
            handleCloseSelect(){
                this.showArea = false
            },
        }
    })
</script>
</html>